<template>
	<view class="c-falls-box" :style="{'grid-template-columns': `repeat(${column},1fr)`,'grid-column-gap':columnGap}">
		<slot v-bind:data="fallsList"></slot>
	</view>

</template>

<script>
	export default {
		name: "c-falls",
		props: {
			column: {
				type: [String, Number],
				default: 1
			},
			list: {
				type: Array,
				default: () => []
			},
			columnGap: {
				type: String,
				default: '10rpx'
			}
		},
		provide() {
			return {
				Cfalls: this
			}
		},
		watch: {
			list: {
				handler(n) {
					if (n && n.length) {
						this.fallsList = this.splitArray(n)
					}
				},
				deep: true,
				immediate: true
			},
			column: {
				handler(n) {
					if (n && this.list && this.list.length) {
						this.fallsList = this.splitArray(this.list)
					}
				}
			}
		},
		data() {
			return {
				fallsList: [],
				key: ['a', 'b', 'c', 'd', 'e', 'f']
			}
		},
		methods: {
			splitArray(array) {
				var result = [];
				let column = this.column || 1
				for (let i = 0; i < column; i++) {
					result.push([])
				}
				var index = 0; // 用于追踪当前数组的索引
				for (var i = 0; i < array.length; i++) {
					result[index].push(array[i]); // 将当前元素添加到当前数组

					index++; // 移动到下一个数组
					if (index === column) {
						index = 0; // 如果已经到达最后一个数组，则重置索引为0
					}
				}
				return result;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.c-falls-box {
		display: grid;
	}
</style>